<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.min.js"></script>
</head>
<body>
    <button id="getBtn">get</button>
    <button id="postBtn">post</button>
    <button id="deleteBtn">delete</button>
    <button id="jsonpBtn">JSONP</button>
<script>
  $(function() {
    // 1, 测是get接口
    $('#getBtn').on('click', function() {
        $.ajax({
            type: 'GET',
            url: 'http://127.0.0.1/api/get',
            data: {
                name: '张三',
                age: 20,
                bookname: '水浒传'
            },
            success: function(res) {
                console.log(res)
            }
        })
    })
    //2 测试post 接口
    $('#postBtn').on('click', function() {
        $.ajax({
            type: 'POST',
            url: 'http://127.0.0.1/api/post',
            data: {
                name: 'WUXU',
                age: 20
            },
            success: function(res) {
                console.log(res)
            }
        })
    })
        //2 测试delete接口
        $('#deleteBtn').on('click', function() {
        $.ajax({
            type: 'DELETE',
            url: 'http://127.0.0.1/api/delete',
            data: {
                name: 'WUXU',
                age: 20
            },
            success: function(res) {
                console.log(res)
            }
        })
    })
    // 4. 为jsonp按钮绑定事件处理函数
    $('#jsonpBtn').on('click', function() {
        $.ajax({
            method: 'GET',
            url: 'http://127.0.0.1/api/jsonp',
            dataType: 'jsonp',
            success: function(res) {
                console.log(res);
            }
        })
    })
  })
</script>
</body>
</html>